<form action="#" class="layui-form">
    <div class="layui-form-item">
        <div class="layui-inline">
            <label>企业名称:</label>
            <div class="layui-inline">
                <input type="text" id="cropName" name="cropName" autocomplete="off" placeholder="请输入名称" class="layui-input">
            </div>
<!--        <button class="layui-btn" lay-submit lay-filter="application-table">搜索</button>-->
            <button class="layui-btn" lay-submit lay-filter="application-table">搜索</button>
        </div>
    </div>
</form>
<script type="text/html" id="application-head-bar">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-sm" lay-event="goEdit"><i class="layui-icon">&#xe654;</i>添加</button>
        <button class="layui-btn layui-btn-sm layui-btn-danger" lay-event="delete"><i class="layui-icon">&#xe640;</i>删除
        </button>
    </div>
</script>
<script type="text/html" id="application-application-bar">
    <a class="layui-btn layui-btn-xs" lay-event="edit-application">编辑</a>
</script>
<table class="layui-table" lay-filter="application-table" id="application-table">
</table>
<script type="text/javascript" >
    layui.use(['table', 'layer', 'form'], function () {
        var table = layui.table;
        var layer = layui.layer;
        var form = layui.form;
        form.render();
        table.render({
            id: "application-table",
            elem: '#application-table'
            , cellMinWidth: 80
            , toolbar: '#application-head-bar'
            , url: '/application/page' //数据接口
            , page: true //开启分页
            , cols: [[
                {checkbox: true},
                {field: 'id', title: '应用ID', sort: true,width:80},
                {field: 'cropName', title: '企业名称'},
                {field: 'appName', title: '应用名称'},
                {field: 'appKey', title: 'AppKey'},
                {field: 'appSecret', title: '应用秘钥'},
                {field: 'redirectUrl', title: '回调地址'},
                {field: 'limitCount', title: '日调用量限制'},
                {field: 'description', title: '应用描述'},
                {field: 'cusId', title: '客户id'},
                {field: 'state', title: '状态', templet: function (data) {return (data.state == 1) ? '<span class="layui-badge layui-bg-green">有效</span>' : '<span class="layui-badge layui-bg-red" >无效</span>'}}, ,
                {fixed: 'right', title: '操作', toolbar: '#application-application-bar', width: 180}
            ]]
        });
        table.on('toolbar(application-table)', function (obj) {
            switch (obj.event) {
                case 'goEdit':
                    //弹表单框
                    openEditWindow(null);
                    break;
                case 'delete':
                    var checkStatus = table.checkStatus(obj.config.id);
                    layer.confirm("确定要删除所选的" + checkStatus.data.length + "行数据吗?", function (object) {
                        // layer.alert(JSON.stringify(checkStatus.data))
                        $.ajax({
                            url: "/application/dels",
                            data: JSON.stringify(checkStatus.data),
                            dataType: "json",
                            contentType: "application/json",
                            method: "post",
                            success: function (result) {
                                layer.msg(result.message);
                                table.reload("application-table")
                            }
                        })
                    });
                    break;
            };
        });
        //监听行工具事件
        table.on('tool(application-table)', function (obj) {
            var data = obj.data;
            switch (obj.event) {
                case "edit-application":
                    openEditWindow(data);
                    break;
            }
        });
        //修改、增加
        function openEditWindow(data) {
            layer.open({
                type: 1,
                title: '编辑',
                area: ['500px', '600px'],
                btn: ['提交', '取消'],
                content: data == null ? $('#application-add-layer').html() : $('#application-edit-layer').html(),
                yes: function (index, layero) {
                    layer.load()
                    $.ajax({
                        url: "/application/" + (data == null ? 'add' : 'update'),
                        data: data == null ? $("#application-add-form").serialize() : $("#application-edit-form").serialize(),
                        method: 'post',
                        success: function (result) {
                            if (result.status) {
                                table.reload("application-table");
                                layer.msg(result.message);
                                layer.close(index);
                            } else {
                                layer.msg(result.message)
                            }
                            layer.closeAll('loading');
                        }
                    })
                },
                success: function (layero, index) {
                    form.render()
                    if (data != null) {
                        form.val("application-edit-form", data);
                        form.val("application-edit-form", {
                            "state": data.state + ""
                        });
                    }
                }
            });
        }
        form.on('submit(application-table)', function (data) {
            table.reload('application-table', {
                page: {
                    curr: 1 //重新从第 1 页开始
                },
                where: data.field
            });
            return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
        });

        //搜索实现
        $("#application-select").on("click", function () {
            var cropName = $("#cropName").val();
            if(cropName==null || cropName==""){
                layer.msg("搜索框内容不能为空！");
                return false;
            }
            table.reload("application-table", {
                url: "/application/page",
                where: {
                    cropName: cropName
                },
                page: {
                    curr: 1 //从1重新开始
                }
            });
            return false;
        });
    });

</script>


<!--增加弹出层-->
<script type="text/html" id="application-add-layer">
    <form id="application-add-form" style="width: 90%" class="layui-form" lay-filter="application-edit-form">
<!--        <input type="hidden" name="id">-->
        <div class="layui-form-item">
            <label class="layui-form-label">公司名称</label>
            <div class="layui-input-block">
                <input type="text" name="cropName" required lay-verify="required" placeholder="请输入公司名称" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">应用名称</label>
            <div class="layui-input-block">
                <input type="text" name="appName" required lay-verify="required" placeholder="请输入应用名称" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">AppKey</label>
            <div class="layui-input-block">
                <input type="text" name="appKey" required lay-verify="required" placeholder="请输入AppKey" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">应用密钥</label>
            <div class="layui-input-block">
                <input type="text" name="appSecret" required lay-verify="required" placeholder="请输入应用密钥" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">回调地址</label>
            <div class="layui-input-block">
                <input type="text" name="redirectUrl" required lay-verify="required" placeholder="请输入回调地址" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">日调用量</label>
            <div class="layui-input-block">
                <input type="text" name="limitCount" required lay-verify="number" placeholder="请输入日调用量" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">应用描述</label>
            <div class="layui-input-block">
                <input type="text" name="description" required lay-verify="required" placeholder="请输入应用描述" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">客户ID</label>
            <div class="layui-input-inline">
                <input type="text" name="cusId" required lay-verify="required"  placeholder="请输入应用描述" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">应用状态</label>
            <div class="layui-input-block">
                <input type="radio" name="state" title="有效" value="1" checked/>
                <input type="radio" name="state" title="无效" value="0"/>
            </div>
        </div>
    </form>
</script>

<!--编辑弹出层-->
<script type="text/html" id="application-edit-layer">
    <form id="application-edit-form" style="width: 90%" class="layui-form" lay-filter="application-edit-form">
        <input type="hidden" name="id">
        <div class="layui-form-item">
            <label class="layui-form-label">公司名称</label>
            <div class="layui-input-block">
                <input type="text" name="cropName" required lay-verify="required" placeholder="请输入公司名称" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">应用名称</label>
            <div class="layui-input-block">
                <input type="text" name="appName" required lay-verify="required" placeholder="请输入应用名称" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">AppKey</label>
            <div class="layui-input-block">
                <input type="text" name="appKey" required lay-verify="required" placeholder="请输入AppKey" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">应用密钥</label>
            <div class="layui-input-block">
                <input type="text" name="appSecret" required lay-verify="required" placeholder="请输入应用密钥" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">回调地址</label>
            <div class="layui-input-block">
                <input type="text" name="redirectUrl" required lay-verify="required" placeholder="请输入回调地址" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">日调用量</label>
            <div class="layui-input-block">
                <input type="text" name="limitCount" required lay-verify="number" placeholder="请输入日调用量" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">应用描述</label>
            <div class="layui-input-block">
                <input type="text" name="description" required lay-verify="required" placeholder="请输入应用描述" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">客户ID</label>
            <div class="layui-input-inline">
                <input type="text" name="cusId" required lay-verify="required"  placeholder="请输入应用描述" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">应用状态</label>
            <div class="layui-input-block">
                <input type="radio" name="state" title="有效" value="1" checked/>
                <input type="radio" name="state" title="无效" value="0"/>
            </div>
        </div>
    </form>
</script>

